﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Registration</title>
    <style type="text/css">
        table 
        {
            border-collapse: collapse;
        }
        th 
        {
            text-align: right;
        }
        td, th
        {
            padding: 5px;
            border: 1px solid #000;
        }
        .td1
        {
            padding: 0px;
            border: 1px solid #000;
        }
        .td2
        {
            padding: 5px;
            border: 0px;
        }
        .th1
        {
            border-left: 1px solid;
            border-right: 1px solid;
            border-top: 0px solid;
            border-bottom: 0px solid;
            text-align:right;
        }
        .footer
        {
            background-color: lightblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <form>
        <table>
            <colgroup>
                <col style="width: 160px"/>
            </colgroup>
            <tfoot>
                <tr>
                    <td colspan="2" class="footer">
                        <input type="submit" value="Submit"/>
                        <input type="reset" value="Clear this form"/>
                    </td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <th>
                        Last Name
                    </th>
                    <td>
                        <input type="text" size="43" placeholder="Spasov"/>
                    </td>
                </tr>
                <tr>
                    <th>
                        First Name
                    </th>
                    <td>
                        <input type="text" size="43" placeholder="Ivaylo"/>
                    </td>
                </tr>
                <tr>
                    <th>
                        Address
                    </th>
                    <td>
                        <textarea rows="4" cols="30" placeholder="j.k. Bykston, Musala str. bl.26A"></textarea>
                    </td>
                </tr>
                <tr>
                    <th>
                        City
                    </th>             
                    <td class="td1">
                        <table>
                            <tr>
                                <td class="td2">
                                    <input type="text" size="27" placeholder="Sofia"/>
                                </td>
                                <th class="th1">                                
                                    State
                                </th>
                                <td class="td2">
                                    <input type="text" size="5"/>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <th>
                        Zip/Postal code
                    </th>
                    <td>
                        <input type="text" size="10" placeholder="1618"/>
                    </td>
                </tr>
                <tr>
                    <th>
                        Country
                    </th>
                    <td>
                        <select >
                            <option>
                                Romania
                            </option>
                            <option selected="selected">
                                Bulgaria
                            </option>
                            <option>
                                Greece
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>
                        Phone (country code, area code, number)
                    </th>
                    <td>
                        <label>(+</label>
                        <input type="tel" size="4" placeholder="359"/>
                        <label>)</label>
                        <input type="tel" size="4" placeholder="889"/>
                        <label>-</label>
                        <input type="tel" size="17" placeholder="278596"/>
                    </td>
                </tr>
                <tr>
                    <th>
                        E-mail
                    </th>
                    <td>
                        <input type="email" size="40" placeholder="ivaylo_spasov@abv.bg"/>
                    </td>
                </tr>
                <tr>
                    <th>
                        Birth date
                    </th>
                    <td>
                        <label>
                            Month
                        </label>
                        <input type="text" size="2" placeholder="11"/>
                        <label>
                            Day
                        </label>
                        <input type="text" size="2" placeholder="14"/>
                        <label>
                            Year (4 digits)
                        </label>
                        <input type="text" size="4" placeholder="1984"/>
                    </td>
                </tr>
                <tr>
                    <th>
                        Gender
                    </th>
                    <td>
                        <select >
                            <option selected="selected">
                                Male
                            </option>
                            <option>
                                Female
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>
                        Starting date
                    </th>
                    <td>
                        <input type="radio" name="period" id="Summer2012"/>
                        <label for="Summer2012">Summer 2012</label>
                        <input type="radio" name="period" id="Autumn2012"/>
                        <label for="Autumn2012">Autumn 2012</label>
                    </td>
                </tr>
                <tr>
                    <th>
                        Comments/Questions
                    </th>
                    <td>
                        <textarea rows="4" cols="30" placeholder="Please send me more information about the exam."></textarea>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>
